<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
        <ActionBar />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :multiple-selected="false"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :width="column.width" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button v-if="row.status !== 'discard'" type="text" title="修改" size="mini" icon="el-icon-edit" @click="edit(row.id)" />
            <el-button type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row.id)" />
            <el-button v-if="row.status !== 'discard'" type="text" title="重发" size="mini" icon="el-icon-position" @click="resendMessage(row.id)" />
            <el-button v-if="row.status !== 'discard'" type="text" title="废弃" size="mini" icon="el-icon-box" @click="discard(row.id)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <FormDialog title="编辑" class="fixed-dialog-height" :append-to-body="true" :show.sync="dialogFormVisible" width="90%" @on-ok="ok" @on-cancel="cancel">
      <EditForm :id="editId" ref="editForm" />
    </FormDialog>
    <ViewDialog v-if="dialogViewVisible" custom-class="second-dialog-height" title="查看" :append-to-body="true" :show.sync="dialogViewVisible" width="90%" @on-cancel="viewCancel">
      <ViewForm :id="editId" />
    </ViewDialog>
  </div>
</template>

<script>
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import ViewForm from './components/viewForm'
import FormDialog from '@neu/biz-core/components/FormDialog'
import TableFilter from './components/tableFilter'
import EditForm from './components/editForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import {
  page,
  remove,
  resendMessage,
  discard
} from '@neu/dcom-ui/api/stopServiceNotice'

export default {
  name: 'StopServiceNoticePage',
  components: {
    TableFilter,
    FormDialog,
    EditForm,
    ActionBar,
    PageableTable,
    ViewDialog,
    ViewForm
  },

  mixins: [databind],
  data() {
    return {
      r: page,
      d: remove,
      /** 通知方式 */
      notices: [{ value: 'notice', label: '系统通知' }, { value: 'message', label: '短信' }, { value: 'email', label: '邮件' }],
      insideColumns: [
        {
          title: '通知编码',
          key: 'code',
          render: (h, params) => {
            return h('span', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: params.row.code },
                props: { type: 'primary' },
                on: { click: () => { this.view(params.row.id) } }},
              params.row.code)
            ])
          }
        },
        {
          title: '通知名称',
          key: 'name'
          // ,
          // render: (h, params) => {
          //   return h('span', [
          //     h('el-link', {
          //       class: 'font-12',
          //       attrs: { title: params.row.code },
          //       props: { type: 'primary' },
          //       on: { click: () => { this.view(params.row.id) } }},
          //     params.row.name)
          //   ])
          // }
        },
        {
          title: '停止服务时间',
          key: 'stopTime',
          render: (h, params) => { return h('span', formatDate(params.row.stopTime)) }
        },
        {
          title: '维护部门',
          key: 'orgName'
        },
        {
          title: '维护地点',
          key: 'location'
        },
        {
          title: '维护类别',
          key: 'modelName'
        },
        {
          title: '维护对象',
          key: 'objNames'
        },
        {
          title: '开始时间',
          key: 'startDateTime',
          render: (h, params) => { return h('span', formatDate(params.row.startDateTime)) }
        },
        {
          title: '结束时间',
          key: 'endDateTime',
          render: (h, params) => { return h('span', formatDate(params.row.endDateTime)) }
        },
        {
          title: '通知人',
          key: 'userNames'
        },
        {
          title: '通知方式',
          key: 'noticeType',
          render: (h, params) => {
            const diffs = this.notices.filter(t => {
              return params.row.noticeType.includes(t.value)
            })
            var noticeTypeNames = ''
            diffs.forEach(i => {
              noticeTypeNames += i.label + ','
            })
            return h('span', noticeTypeNames.substring(0, noticeTypeNames.length - 1))
          }
        },
        {
          title: '状态',
          key: 'status',
          render: (h, params) => {
            const text = params.row.status === 'send' ? '已发送' : (params.row.status === 'unsend' ? '未发送' : '废弃')
            return h('span', [
              h('el-tag', text)
            ])
          }
        }
        // {
        //   title: '创建时间',
        //   width:150,
        //   key: 'createTime',
        //   render: (h, params) => { return h('span', formatDate(params.row.createTime)) }
        // }
      ],
      dialogFormVisible: false,
      dialogViewVisible: false,
      editId: -1
    }
  },
  methods: {
    edit(id) {
      this.editId = id
      this.dialogFormVisible = true
    },
    ok() {
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        this.refresh()
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      this.dialogFormVisible = false
    },
    view(id) {
      this.editId = id
      this.dialogViewVisible = true
    },
    viewCancel() {
      this.editId = -1
      this.dialogViewVisible = false
    },
    resendMessage(id) {
      this.$confirm('确定发送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resendMessage(id).then(response => {
          this.$message({
            type: 'success',
            message: '发送成功!'
          })
          this.refresh()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发送'
        })
      })
    },
    discard(id) {
      this.$confirm('确定废弃通知?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        discard(id).then(response => {
          this.$message({
            type: 'success',
            message: '废弃通知成功!'
          })
          this.refresh()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消废弃通知'
        })
      })
    }
  }
}
</script>
